<template>
  <div
    :style="{
      height: '530px',
      background: `url(${path}) no-repeat center center`,
    }"
  >
    <div class="tabs">
      <a-radio-group
        v-model:value="tabValue"
        style="margin: 20px auto"
        button-style="solid"
        @change="onChangeTab"
      >
        <a-radio-button
          v-for="item in tabList"
          :key="item.value"
          :value="item.value"
        >
          {{ item.label }}
        </a-radio-button>
      </a-radio-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const path = ref("");
const tabValue = ref("1");
const tabList = [
  {
    label: "楼房",
    value: "1",
  },
  {
    label: "关于我们",
    value: "2",
  },
  {
    label: "租好房",
    value: "3",
  },
  {
    label: "新闻资讯",
    value: "4",
  },
  {
    label: "商务合作",
    value: "5",
  },
];

const onChangeTab = (e) => {
  // console.log(e.target.value);
  // 静态资源动态引入，打包生成文件指纹
  import(`../../assets/images/${tabValue.value}.png`).then((res) => {
    path.value = res.default;
  });
  // const url = new URL(`../../assets/images/${value}.png`, import.meta.url);
  // path.value = url.pathname;
};
onChangeTab();
</script>

<style lang="scss" scoped>
.tabs {
  text-align: center;
}
</style>
